<template>
  <div style="padding:20px">
    <el-card style="padding:30px 60px">
      <!-- 标题 -->
      <el-row style="margin-bottom: 10px;">
        <el-col :span="20"><div /> 传智教育 </el-col>
        <el-col :span="4"><div />
          <el-row type="flex" justify="end" style="padding-left:4px">
            <!-- 两个内容 -->
            <el-col>负责人</el-col>
            <!-- 下拉菜单 element -->
            <el-col>
              <el-dropdown>
                <span>
                  操作<i class="el-icon-arrow-down" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="addDepartment('')">添加子部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <!-- 树形控件 -->
      <el-tree :data="data" :props="defaultProps">
        <template slot-scope="{ data }">
          <el-row style="width: 100%;">
            <el-col :span="20"><div /> {{ data.name }} </el-col>
            <el-col :span="4"><div />
              <el-row type="flex" justify="end">
                <!-- 两个内容 -->
                <el-col>负责人</el-col>
                <!-- 下拉菜单 element -->
                <el-col>
                  <el-dropdown>
                    <span>
                      操作<i class="el-icon-arrow-down" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="addDepartment(data.id)">添加子部门</el-dropdown-item>
                      <el-dropdown-item @click.native="editDepartment(data)">编辑部门</el-dropdown-item>
                      <el-dropdown-item @click.native="delDepartment(data.id)">删除部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </el-card>

    <!-- Dialog弹层 -->
    <el-dialog :title="isEdit?'编辑部门':'添加部门'" :visible.sync="dialogFormVisible">
      <departmentDialog
        v-if="dialogFormVisible"
        :dialog-form-visible.sync="dialogFormVisible"
        :pid="pid"
        :is-edit="isEdit"
        :row="row"
        @success="loadDepartment"
      />
    </el-dialog>
  </div>
</template>

<script>
import { getDepartments, delDepartment } from '@/api/departments'
import { transArray } from '@/utils'
import departmentDialog from './departmentDialog.vue'
export default {
  components: {
    departmentDialog
  },
  data() {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dialogFormVisible: false,
      pid: '',
      isEdit: false,
      row: {}
    }
  },
  created() {
    this.loadDepartment()
  },
  methods: {
    // 获取组织架构列表
    async loadDepartment() {
      const res = await getDepartments()
      // console.log(res, 777)
      if (res.code === 10000) {
        this.data = transArray(res.data.depts)
        // console.log(this.data)
      }
    },
    addDepartment(pid) {
      this.dialogFormVisible = true
      this.pid = pid
      this.isEdit = false
    },
    async delDepartment(id) {
      const res = await this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      // console.log(res, 7777)
      if (res === 'confirm') {
        const result = await delDepartment(id)
        // console.log(result, 9991)
        if (result.code === 10000) {
          this.loadDepartment()
          this.$message({
            type: 'info',
            message: '删除成功'
          })
        }
      }
    },
    editDepartment(row) {
      this.dialogFormVisible = true
      this.isEdit = true
      // console.log(row, 9921)
      this.row = row
    }
  }
}
</script>
<style lang='less'  scoped>
</style>
